<template>
	<div class="singer-live">
		<div class="nav-head"><router-link to="/vedio"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">歌手直播</div></div>
		<div class="top-blank"></div>
		<div class="live-wraper">
			<div class="yuyue-live">
				<h2>来预约直播吧</h2>
				<div class="live-list">
					<div class="live-info">
						<div class="detail">
							<div class="singer-icon"><img src="../../../../assets/jay.png"></div>
							<div class="info">
								<p class="desc">2017周杰伦全新专辑</p>
								<p class="live-style">首发直播</p>
								<p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p>
							</div>
							<div class="yiguanzhu">已关注</div>
						</div>
						<div class="hr"></div>
					</div>
					<div class="live-info">
						<div class="detail">
							<div class="singer-icon"><img src="../../../../assets/jay.png"></div>
							<div class="info">
								<p class="desc">2017周杰伦全新专辑</p>
								<p class="live-style">首发直播</p>
								<p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p>
							</div>
							<div class="guanzhu">+关注</div>
						</div>
						<div class="hr"></div>
					</div>
					<div class="live-info">
						<div class="detail">
							<div class="singer-icon"><img src="../../../../assets/jay.png"></div>
							<div class="info">
								<p class="desc">2017周杰伦全新专辑</p>
								<p class="live-style">首发直播</p>
								<p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p>
							</div>
							<div class="guanzhu">+关注</div>
						</div>
						<div class="hr"></div>
					</div>
				</div>
			</div>
			<div class="live-back">
				<h2>直播回看</h2>
				<div class="live-back-vedio">
					<img src="../../../../assets/live-back-pic.png">
				</div>
				<div class="live-back-vedio">
					<img src="../../../../assets/live-back-pic.png">
				</div>
				<div class="live-back-vedio">
					<img src="../../../../assets/live-back-pic.png">
				</div>
				<div class="live-back-vedio">
					<img src="../../../../assets/live-back-pic.png">
				</div>
				<div class="live-back-vedio">
					<img src="../../../../assets/live-back-pic.png">
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"singerLive",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.live-wraper{
	background-color: #dbd7df;
	.yuyue-live{
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		padding-left: 20 / 100rem;
		h2{
			padding-top: 32 / 100rem;
			padding-bottom: 27 / 100rem;
			font-size: 30 / 100rem;
		}
		.live-list{
			margin-bottom: 20 / 100rem;
			.live-info{
				padding-bottom: 24/100rem;
				.detail{
					overflow: hidden;
					position: relative;
					div{
						float: left;
					}
					.singer-icon{
						width: 180/100rem;
						height: 180/100rem;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.info{
						font-size: 24/100rem;
						padding-top: 30/100rem;
						padding-left: 15/100rem;
						.live-style{
							margin-top: 20/100rem;
							margin-bottom: 38/100rem;
							height: 24/100rem;
						}
					}
					.yiguanzhu{
						position: absolute;
						right: 20 / 100rem;
						top:49 / 100rem;
						width: 106 / 100rem;
						height: 43 / 100rem;
						border: 2 / 100rem solid #c995f5;
						border-radius: 18 / 100rem;
						text-align: center;
						line-height: 43 / 100rem;
						color: #c995f5;
						font-size: 18 / 100rem;
					}
					.guanzhu{
						position: absolute;
						right: 20 / 100rem;
						top:49 / 100rem;
						width: 106 / 100rem;
						height: 43 / 100rem;
						border: 2 / 100rem solid #333;
						border-radius: 18 / 100rem;
						text-align: center;
						line-height: 43 / 100rem;
						font-size: 18 / 100rem;
					}
				}
				.hr{
					width: 528/100rem;
					height: 1px;
					background-color:#ccc;
					margin-top: 14/100rem;
					margin-left: 172/100rem;
				}	
			}
		}
	}
	.live-back{
		background-color: #fff;
		width: 100%;
		h2{
			padding-top: 32 / 100rem;
			padding-bottom: 27 / 100rem;
			font-size: 30 / 100rem;
			box-sizing: border-box;
			padding-left: 20 / 100rem;
		}
		.live-back-vedio{
			width: 100%;
			height: 295 / 100rem;
			margin-bottom: 20 / 100rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>